<!--
 * @Author: zqx me_zqx@163.com
 * @Date: 2025-07-02 10:05:23
 * @LastEditors: zqx me_zqx@163.com
 * @LastEditTime: 2025-07-02 10:09:50
 * @FilePath: /XMate-h5/src/views/myXmate/myTeam/teamNoticeBoard/teamCustomTavView.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <!-- 标签切换 -->
  <div class="flex overflow-x-auto hide-scrollbar">
    <div
      v-for="(tab, index) in tabs"
      :key="tab.value ?? index"
      class="tabTag px-4 py-1.5 mr-2 text-sm whitespace-nowrap rounded-full cursor-pointer  text-center scrollHorizontal"
      :class="
        activeIndex === index
          ? 'bg-[#E6EEFF] text-yxt-blue'
          : 'bg-[#F4F5F6] text-[#595959]'
      "
      @click="onTabClick(index)"
    >
      {{ tab.text }}
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineProps, defineEmits } from "vue";
import { TabItem } from "./teamCustomTavView.d";

const props = defineProps<{
  tabs: {
    type: typeof TabItem[],
    required: true,
    default: () => []
  };
  activeIndex: number;
}>();

const emit = defineEmits<{
  (e: "update:activeIndex", value: number): void;
}>();

function onTabClick(index: number) {
  if (index !== props.activeIndex) {
    emit("update:activeIndex", index);
    scrollToIndex(index);
  }
}

function scrollToIndex(index : number) {
  let inline = "center";
  if (index === 0) {
    inline = "start";
  }
  if (index === props.tabs.length - 1) {
    inline = "end";
  }
  const element =  document.querySelectorAll(".tabTag")[index];
  if (element) {
    element.scrollIntoView({
      behavior: "smooth",
      block: "center",
      inline
    });
  }
}
</script>

<style scoped>

.hide-scrollbar {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */
}
.hide-scrollbar::-webkit-scrollbar {
  display: none; /* Chrome/Safari/Webkit */
}


</style>
